/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import Taro, { Component } from '@tarojs/taro';
import { ScrollView } from '@tarojs/components'

// project
import { CPage, CContent, CHeader, CFooter, CFloat, CAround, CBetween, CCenter, CRow, CWrap, CLine, CHand, CItemX, CItemY, CText, CLabel, CSvg, CImage, CButton } from '../../library/comp';
import { Base64, Gen, Time, Zip, Session, Storage, Http } from '../../library/func';
import Icon from '../../project/style/icon';

import ConfigNet from '../../project/func/http/http'

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class Index extends Component {

	/*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
		super(props);

		/**
		 * state
		 */
		this.state = {
			category: [],
			scat: [],
			// 索引
			index:0,

			// 右侧名称显示
			name: '',

			// 获取屏幕高度
			scrollHeight: wx.getSystemInfoSync().windowHeight,
		}
	}

	/*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
	// villMont
	componentWillMount () {
	}

	// didMount
	componentDidMount() {

		console.log('scrollHeight=======',this.state.scrollHeight)

		// 获取类别数据
		ConfigNet.get({
			url: 'product/category.php',
			success: (data)=> {
				console.log('类别is' , data)
				this.setState({
					category: data,
					scat: data[0].item,
					name: data[0].set_name
				})
			},
			error: (res)=> {
				console.log('逻辑错误');
				console.log(res);
			},
		});
	}
	
	/*------------------------------------------------------------------------------------
	 * 事件处理
	 *-----------------------------------------------------------------------------------*/
	// onClick
	onClick = (index, id, e)=> {
		this.setState({
			...this.state,
			scat: this.state.category[index].item,
			name: this.state.category[index].set_name,
			index: index
		})
	}
    
    // onRedirect
    // onRedirect = (url, e)=> {
    //     wx.redirectTo({
    //         url: url
    //     })
    // }

    // onNavigate
    onNavigate = (id, e)=> {
		wx.navigateTo({
			url: '/screen/product/list?cid=' + id
		})
    }

	/*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
	
	config = {
        navigationBarTitleText: '商品类别',
        navigationBarBackgroundColor: '#dd2f3c',
        navigationBarTextStyle: '#fff'
    }

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render () {
		const style = {
			height: this.state.scrollHeight +'px'
		}
		return (
			<CPage>
				<CBetween>
					<ScrollView class='scrollLeft' style={style}>
						{this.state.category.map((cat, i) => {
							return (
								<CHand pa='20 40' size='26' style='width:100%; height:80rpx; font-weight:bold; background:#f2f2f2; color:#353535;' onClick={this.onClick.bind(this, i, cat.id)} class={this.state.index == i ? 'catActive' : ' '}>{cat.set_name}</CHand>
								// <CText lh='40' pa='20 40' style='display:block; font-weight:bold' onClick={this.onClick.bind(this, i, cat.id)} class={this.state.index == i ? 'catActive' : ' '}>{cat.set_name}</CText>
							)
						})}
					</ScrollView>	
					<ScrollView bg='#f2f2f2' class='scrollRight' style={style}>
						<CLine pa='20 40' pb='0'>
							<CHand size='28' bold color='#353535'>{name}</CHand>
						</CLine>
						<CWrap ma='20 30' bg='#fff' ra='16' pa='30'>
							{this.state.scat.map(cat => {
								return(
									<CItemY class='w03' onClick={this.onNavigate.bind(this, cat.id)}>
										<CImage w='100' h='100' src='http://image.cdn.hesq.com.cn/rushbuy/category/{{cat.object.set_image}}'></CImage>
										<CHand size='24' color='#666' mt='30'>{cat.set_name}</CHand>
									</CItemY>
								)
							})}
						</CWrap>	
					</ScrollView>	
				</CBetween>
			</CPage>
		)
	}
}


